<template>
	<view class="m30">
		<view class="radius30 bgFff p30">
			<view class="flex">
				<text class="c343 bold"><text class="cff7">*</text>投诉类型</text>
				<view class="ml20 bgF7 radius30 p20 flex" @click="open">
					<text class="c343 f26 mr20">{{form.type || '选择投诉类型'}}</text>
					<u-icon name="arrow-down" color="#333"></u-icon>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="flex">
				<text class="c343 bold"><text class="cff7">*</text>投诉对象</text>
				<view class="ml20 bgF7 radius30 p20 flex1 f26">
					用户昵称:{{form.name}} <br>用户ID:{{form.userId}}
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="">
				<view class="c343 bold"><text class="cff7">*</text> <text>投诉描述</text></view>
				<view class="radius30 mt20">
					<u--textarea v-model="form.content" placeholder="提交更多信息有助于投诉快速处理哦~"></u--textarea>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="">
				<view>
					<text class="c343 bold">上传凭证</text>
					<text class="c999 f24">（选填，请上传最多5张的关联材料）</text>
				</view>
				<view class="mt20">
					<uploadImg :imgList="imgList" @imgListChange="getImgList"></uploadImg>
				</view>
			</view>
		</view>
		<u-gap height="80"></u-gap>
		<view class="flex-au">
			<u-button type="" shape="circle"
				color="linear-gradient(170deg, #FFA5F5, #319EFF)"
				:customStyle="{'width':'50%','height':'80rpx'}" @click="submit">提交</u-button>
		</view>
		<u-picker :show="showType" :columns="[typeList]" keyName="name" @cancel="close" @close="close" @confirm="typeConfirm"></u-picker>
	</view>
</template>

<script>
	import uploadImg from '@/components/upload/upload.vue'
	import {subComplaint} from '@/common/api_meethuangshi.js'
	export default {
		components:{
			uploadImg
		},
		name:'',
		data() {
			return {
				showType:false,
				form:{},
				typeList:[
					{
						name:'侵犯肖像、隐私、名誉、知识产权等'
					},
					{
						name:'色情低俗'
					},
					{
						name:'政治敏感'
					},
					{
						name:'涉嫌诈骗'
					},
					{
						name:'种族歧视'
					},
					{
						name:'违法违规'
					},
					{
						name:'违反公德秩序'
					},
					{
						name:'涉未成年不当内容'
					},
					{
						name:'谩骂嘲讽、煽动对立'
					},
					{
						name:'内容引人不适'
					},
					{
						name:'标题党、夸张博眼球'
					},
					{
						name:'虚假、不实内容'
					},
					{
						name:'不属于以上类型'
					},
				],
				imgList:[]
			}
		},
		onLoad(option) {
			this.form.name = option.name;
			this.form.userId = option.uid
		},
		methods: {
			open(){
				this.showType = true;
			},
			close(){
				this.showType = false;
			},
			typeConfirm(e){
				console.log(e);
				this.form.type = e.value[0].name;
				this.close();
			},
			getImgList(data){
				this.imgList = data;
			},
			async submit(){
				if(!this.form.type){
					uni.showToast({
						title:'请选择投诉类型',
						icon:'none'
					})
					return false;
				}
				if(!this.form.content){
					uni.showToast({
						title:'请输入投诉描述',
						icon:'none'
					})
					return false;
				}
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const data = {
					userId:userId,
					complaintUserId:this.form.userId,
					type:this.form.type,
					content:this.form.content,
					img:this.imgList.join(','),
				}
				uni.showLoading({
					mask:true
				})
				const res = await subComplaint(data)
				if(res.code == 200){
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					setTimeout(() =>{
						uni.navigateBack()
					},500)
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	
</style>
